<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>课程表</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .table {
            display: table;
            width: 100%;
            text-align: center;
        }

        .table-header {
            display: table-row;
            background: #4caf50;
        }

        .table-header-cell {
            display: table-cell;
            font-size: 1.2em;
            padding: 5px;
        }

        .table-row {
            display: table-row;
        }

        .table-cell {
            display: table-cell;
            padding: 5px;
        }

        .table-row:hover {
            background-color: #f2f2f2;
        }
        .conflict{
            color:#ccc;
        }
    </style>
</head>
<body>
<div style="margin: 20px">
    <p>
        模拟响应式禁选课授课时间冲突的课程。
    </p>
</div>
<div class="table" id="course-table">
    <div class="table-header">
        <div class="table-header-cell">#</div>
        <div class="table-header-cell">名称</div>
        <div class="table-header-cell">学分</div>
        <div class="table-header-cell">起止周</div>
        <div class="table-header-cell">时间</div>
        <div class="table-header-cell">教师</div>
        <div class="table-header-cell">操作</div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>

    const courseElements = new Map();

    const conflictMap = new Map();

    const timeIndex = {};

    const conflictCounter = new Map();

    $(function () {
        // 初始化并添加数据
        courses.forEach((c, index) => {
            const h = `
                <div class="table-row" data-courseid="${c.id}">
                    <div class="table-cell">${index + 1}</div>
                    <div class="table-cell">${c.name}</div>
                    <div class="table-cell">${c.point}</div>
                    <div class="table-cell">${c.startWeek} - ${c.endWeek}</div>
                    <div class="table-cell">周${c.dayOfWeek} / ${c.period}节</div>
                    <div class="table-cell">${c.teacherName}</div>
                    <div class="table-cell">
                        <input type="checkbox" class="course-checkbox" data-courseid="${c.id}">
                    </div>
                </div>
            `;
            $('#course-table').append(h);

            courseElements.set(c.id, {
                $row: $(`[data-courseid="${c.id}"]`),
                $checkbox: $(`input[data-courseid="${c.id}"]`)
            });

            const k = `${c.dayOfWeek}-${c.period}`;//按"周几-节次"分组
            if (!timeIndex[k]) timeIndex[k] = [];
            timeIndex[k].push(c);

            conflictCounter.set(c.id, 0);
        });

        //绑定复选框
        $('.course-checkbox').on('change', function() {
            const courseId = $(this).data('courseid');
            updateConflictStatus(courseId, $(this).is(':checked'));
        });
    });

    function findConflicts(courseId) {
        const curCourse = courses.find(c => c.id === courseId);
        if (!curCourse) return [];

        const k = `${curCourse.dayOfWeek}-${curCourse.period}`;
        const MaybeConflicts = timeIndex[k] || [];//取同时间段的课

        return MaybeConflicts.filter(c =>
            c.id !== courseId &&//排除自己
            !(curCourse.endWeek < c.startWeek || curCourse.startWeek > c.endWeek)//检查起始周次
        );
    }

    //更新冲突状态
    function updateConflictStatus(courseId, isSelected) {
        if (!conflictMap.has(courseId)) {
            const conflictCourses = findConflicts(courseId);
            conflictMap.set(courseId, {
                conflictCourseIds: conflictCourses.map(c => c.id),
                elements: conflictCourses.map(c => courseElements.get(c.id))
            });
        }

        // const conflictCourseIds = conflictMap.get(courseId).conflictCourseIds;
        // const elements = conflictMap.get(courseId).elements;

        const { conflictCourseIds, elements } = conflictMap.get(courseId);

        conflictCourseIds.forEach((conflictId, index) => {
            //更新冲突计数器
            const curCount = conflictCounter.get(conflictId) || 0;
            const newCount = isSelected ? curCount + 1 : curCount - 1;
            conflictCounter.set(conflictId, newCount);

            const { $row, $checkbox } = elements[index];
            if (newCount > 0) {
                $row.addClass('conflict');
                $checkbox.prop('disabled', true);//禁用
            } else {
                $row.removeClass('conflict');
                $checkbox.prop('disabled', false);
            }
        });
    }

    // 模拟课程数据
    const courses = [
        {
            id: 100,
            name: '数据库原理',
            point: 3.0,
            startWeek: 1,
            endWeek: 10,
            dayOfWeek: 1,
            period: 12,
            teacherName: '谭文韬'
        },
        {
            id: 101,
            name: '影视赏析',
            point: 1.5,
            startWeek: 1,
            endWeek: 8,
            dayOfWeek: 1,
            period: 12,
            teacherName: '李春泰'
        },
        {
            id: 102,
            name: 'Web系统框架',
            point: 2.5,
            startWeek: 11,
            endWeek: 17,
            dayOfWeek: 1,
            period: 12,
            teacherName: '王子阳'
        },
        {
            id: 103,
            name: '托福阅读',
            point: 2.0,
            startWeek: 5,
            endWeek: 15,
            dayOfWeek: 1,
            period: 12,
            teacherName: '李景阳'
        },
        {
            id: 104,
            name: 'Web开发技术',
            point: 2.5,
            startWeek: 1,
            endWeek: 8,
            dayOfWeek: 1,
            period: 34,
            teacherName: '徐懿'
        },
        {
            id: 105,
            name: '高级英语视听',
            point: 2.0,
            startWeek: 3,
            endWeek: 10,
            dayOfWeek: 1,
            period: 34,
            teacherName: '龙超悦'
        }
    ]
</script>
</body>
</html>